<template>
  <div>
    <div>
      options配置：
      <br />
      <CloudCheckboxGroup
        v-model="value"
        name="checkboxgroup"
        :options="plainOptions"
        @change="onChange"
      />
      <br />
      <CloudCheckboxGroup
        v-model="value1"
        :options="plainOptions"
        :default-value="['Apple']"
        @change="onChange"
      />
      <br />
      <CloudCheckboxGroup
        v-model="value2"
        :options="options"
        :value="['Pear']"
        @change="onChange"
      />
      <br />
      <CloudCheckboxGroup
        :options="optionsWithDisabled"
        disabled
        :default-value="['Apple']"
        @change="onChange"
      >
        <span slot="label" slot-scope="{ value }" style="color: red">{{
          value
        }}</span>
      </CloudCheckboxGroup>
    </div>
    <div style="margin-top: 10px">
      list配置：
      <br />
      <CloudCheckboxGroup :list="list" v-model="value5"></CloudCheckboxGroup>
    </div>
  </div>
</template>
<script>
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange' },
];
const optionsWithDisabled = [
  { value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange', disabled: false },
];
export default {
  title: '3.Checkbox组 , 几种配置方式',
  subTitle: '方便的从数组生成checkbox',
  data() {
    return {
      plainOptions,
      options,
      optionsWithDisabled,
      value: [],
      value1: ['Apple'],
      value2: ['Apple'],
      value5: [0],
      list: [{
        title: 'A',
        value: 0
      }, {
        title: 'B',
        value: 1
      }, {
        title: 'C',
        value: 2
      }, {
        title: 'D',
        value: 3
      }]

    }
  },
  methods: {
    onChange(checkedValues) {
      console.log('checked = ', checkedValues);
      console.log('value = ', this.value);
    },
  }
}
</script>

<style lang="scss">
</style>